WordPress AOSで要素に簡単に動きをつける
Animate On Scroll Library
https://michalsnik.github.io/aos/
下記をテキトーなところに貼り付け
CSSをヘッド内に
<link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css">JSをボディの閉じタグの直前に貼り付ける
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
下記をJSに記述して読み込み
AOS.init({
//オプションを記述
})追記、下記のエラーメッセージが出る場合
style.js:39 Uncaught ReferenceError: AOS is not definedファンクションで囲むことでエラーが解消されます。
// Animate On Scroll Library
$(function(){
AOS.init({
});
});横並びに順番をつけてリッチにする場合は data-aos-delayを使用します。
<ul class="display_flex">
<li data-aos="fade-up" data-aos-delay="">テスト</li>
<li data-aos="fade-up" data-aos-delay="100">テスト</li>
<li data-aos="fade-up" data-aos-delay="150">テスト</li>
<li data-aos="fade-up" data-aos-delay="200">テスト</li>
<li data-aos="fade-up" data-aos-delay="250">テスト</li>
<li data-aos="fade-up" data-aos-delay="300">テスト</li>
<li data-aos="fade-up" data-aos-delay="350">テスト</li>
</ul>
